<template>
	<div :style="{backgroundColor: styleObject.pageBackgroundColor}" class="page-background" id="guide-container">
		<div class="content1" :style="{backgroundColor: styleObject.pageContentBackgroundColor}">
			<el-form :inline="true">
<!-- 				<el-form-item>
					<el-button type="primary" plain size="small" @click="createOrganization">添加机构</el-button>
				</el-form-item> -->
				<el-form-item>
					<el-button type="primary" plain size="small"  @click="openDept">部门管理</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" plain size="small" @click="openPeopleManagement">人员管理</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="danger" plain size="small" @click="deleteById">删除机构</el-button>
				</el-form-item>


			</el-form>
			<el-table :data="organizationList" highlight-current-row @row-click="rowClick">
				<el-table-column type="index" width="50" />
				<el-table-column prop="title" label="机构名称"></el-table-column>
				<el-table-column label="类型">
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.status != -1">创建</el-tag>
						<el-tag type="info" v-else>加入</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template #default="scope">
						<el-button type="danger" v-if="scope.row.status == -1" plain size="small"
							@click="quitById(scope.row.id)">退出机构</el-button>
					</template>
				</el-table-column>
			</el-table>


			<my-modal :title="modalTitle" ref="myModal" v-if="modalShow" @confirm="confirmSubmit"
				@closeModal="modalShow = $event" placeholder="请输入机构名称"></my-modal>
			<people-management :organizationId="organizationId" v-if="peopleShow"></people-management>
			<organization-detail v-if="deptShow" ref="organizationDetail"></organization-detail>
		</div>
	</div>
</template>

<script>
	import MyModal from '@/component/MyModal/MyModal.vue'
	import myMixin from '@/utils/myMixin.js'
	import PeopleManagement from './peopleManagement.vue'
		import OrganizationDetail from './organizationDetail.vue'
	import {
		useMouse
	} from '@/utils/index.js'
	import {
		ElNotification
	} from 'element-plus'
	var that;
	export default {
		mixins: [myMixin], //混入
		data() {
			return {
				organizationId: '', //添加人员，组织id
				title: '',
				parentId: '',
				modalShow: false,
				peopleShow: false, //人员管理
				deptShow: false, //人员管理
				modalTitle: '添加部门',
				organizationList: [], //机构列表选项 -1
				organizationIndex: 0, //选中下标
				dataFrom: {},
			}
		},
		setup() {
			return useMouse();
		},
		mounted() {
			that = this;

			ElNotification({
				title: '通知',
				message: '机构创建人、管理员可管理该机构或者本部门下所有成员的班级,以及查看签到记录.',
			})

			that.getData()
		},
		methods: {
			openDept(){
				if (!that.organizationId) {
					return that.warningMessage("请先选择一行");
				}
				
				this.deptShow = true;
				this.$nextTick(()=>{
					this.$refs["organizationDetail"].organizationId = that.organizationId;
					this.$refs["organizationDetail"].init();
				})
			},
			//打开
			openPeopleManagement() {
				if (!that.organizationId) {
					return that.warningMessage("请先选择一行");
				}
				that.peopleShow = true;
			},
			rowClick({
				id,title,parentId
			}) {
				that.organizationId = id;
				that.title = title;
				that.parentId = parentId;
			},
			createOrganization() {
				that.modalTitle = '添加机构';
				that.modalShow = true;
			},
			async confirmSubmit(content) {
				if (!that.$store.state.member) {
					return that.confirmMessageMember('该功能为会员专享功能。如需了解会员具体权益，可查看详情。', async () => {})
				}

				let url = "/organization/save";
				let dataFrom = {
					unionid: that.$store.state.$userInfo.id,
					title: content,
					parentId: '-1'
				}

				const {
					code,
					msg
				} = await that.$asyncHttp(url, dataFrom)

				if (code == 401) {
					return that.confirmMessageMember(msg + '。新建多个机构为会员专享功能。如需了解会员具体权益，可查看详情。', async () => {})
				}

				that.modalShow = false;

				that.getData();
			},
			async getData() {

				const {
					organizationList
				} = await that.$asyncHttp('/organization/selectList', {
					code: that.$store.state.$userInfo.id,
					id: that.id
				})

				that.organizationList = organizationList;
			},
			//删除机构
			deleteById() {
				if (!that.organizationId) {
					return that.warningMessage("请先选择一行");
				}

				that.confirmMessage('确认删除？', async () => {
					const res = await that.$asyncHttp("/organization/deteleById", {
						id: that.organizationId
					})

					that.getData();
				})
			},
			//退出机构
			quitById(id) {
				that.confirmMessage('确认退出？', async () => {
					const res = await that.$asyncHttp("/organization/quitById", {
						id: id,
						code: that.$store.state.$userInfo.id
					})
					that.hintMessage('已退出')

					that.getData();
				})

			},
		},
		components: {
			MyModal,
			PeopleManagement,
			OrganizationDetail
		}
	}
</script>

<style>
	@import url('/src/assets/style/my-style.css');
	@import url('/src/assets/style/my-bgcolor.css');

	.content1 {
		height: 100%;
		/* margin: 10px; */
		/* border-radius: 10px; */
		background: #FFFFFF;
		color: #606266;
	}

	.el-form--inline .el-form-item {
		display: inline-flex;
		vertical-align: middle;
		margin-right: 15px;
	}
</style>